<template>
	<view>
	<view class="bgView">
		<view class="title2">
			填写银行卡信息
		</view>
		<view class="flex-row-flex-start" style="height: 118rpx;">
			<view class="title3">
				银行卡号
			</view>
			<view class="inputView flex1">
				<input v-model="info.bank_account" type="text" placeholder="请填写银行卡号">
			</view>
		</view>
		<view class="line">
			
		</view>
		<view class="flex-row-flex-start" style="height: 118rpx;">
			<view class="title3">
				持卡人姓名
			</view>
			<view class="inputView flex1">
				<input v-model="info.name" type="text" placeholder="请填写身份证号">
			</view>
		</view>
		<view class="line">
			
		</view>
		<view class="flex-row-flex-start" style="height: 118rpx;">
			<view class="title3">
				身份证号
			</view>
			<view class="inputView flex1">
				<input v-model="info.cert_no" type="text" placeholder="请填写身份证号">
			</view>
		</view>
		<view class="line">
			
		</view>
		<view class="flex-row-space-between" style="height: 118rpx;">
			<view class="flex-row-flex-start">
				<view class="title3">
					手机号
				</view>
				<view class="inputView ">
					<input v-model="info.mobile" type="text" placeholder="请填写手机号">
				</view>
			</view>
			<view class="sms-btn primary " @click="$sendSms">
				<view  v-show="canSendSms">获取验证码</view>
				<view v-show="!canSendSms" class="">
					<u-count-down ref="countDown" :show-days="false" :timestamp="time" :showColon="false"
						separator="zh" color="#FF2C3C" separator-color="#FF2C3C" :show-hours="false"
						:show-minutes="false" :autoplay="false"  @end="countDownFinish()" />
				</view>
			
			</view>
			
		</view>
		<view class="line">
			
		</view>
		<view class="flex-row-flex-start" style="height: 118rpx;">
			<view class="title3">
				验证码
			</view>
			<view class="inputView flex1">
				<input v-model="info.code" type="text" placeholder="请填写验证码">
			</view>
		</view>
		<view class="line">
			
		</view>
	
	</view>
	<view @click="buttonClick()" class="button flex-column-center">
		提交
	</view>
	</view>
</template>

<script>
	import {
readyBindBankAccount,
confirmBindBankAccount
	} from '@/api/lease.js';
	export default {
		components: {},
		computed: {

		},
		data() {
			return {
				info:{
					name:'',
					cert_no:'',
					mobile:'',
					order_no:'',
					bank_account:'',
					code:'',
					unique_code:'',
				},
				time: 59,
				canSendSms: true,
				title:'',
				content:'',
				
			}
		},
		onShow() {

		},
		onLoad(e) {
			this.info.order_no=e.order_no
			
			
		},
		
		methods: {
			countDownFinish() {
				this.canSendSms = true;
			},
			buttonClick(){
			
				if (!this.info.bank_account.length) {
					this.$toast({
						title: '请填写银行卡号'
					})
					return;
				}
				if (!this.info.name.length) {
					this.$toast({
						title: '请填写持卡人姓名'
					})
					return;
				}
				if (!this.info.cert_no.length) {
					this.$toast({
						title: '请填写身份证号'
					})
					return;
				}
				if (!this.info.mobile.length) {
					this.$toast({
						title: '请填写手机号'
					})
					return;
				}
				if (!this.info.unique_code.length) {
					this.$toast({
						title: '请先获取验证码'
					})
					return;
				}
				if (!this.info.code.length) {
					this.$toast({
						title: '请填写验证码'
					})
					return;
				}
				
				confirmBindBankAccount(this.info).then(res => {
					
				this.$toast({
					title:res.msg
				})
				if(res.code==1){
					setTimeout(() => {
					            uni.navigateBack()   
					             }, 2000)
				}
				
					
				});
			},
			$sendSms() {
				if (this.canSendSms == false) {
					return;
				}
				if (!this.info.bank_account.length) {
					this.$toast({
						title: '请填写银行卡号'
					})
					return;
				}
				if (!this.info.name.length) {
					this.$toast({
						title: '请填写持卡人姓名'
					})
					return;
				}
				if (!this.info.cert_no.length) {
					this.$toast({
						title: '请填写身份证号'
					})
					return;
				}
				if (!this.info.mobile.length) {
					this.$toast({
						title: '请填写手机号'
					})
					return;
				}
				readyBindBankAccount(this.info).then(res => {
					this.canSendSms = false;
					this.$refs.countDown.start();
				this.$toast({
					title:res.msg
				})
				if(res.code==1){
				this.info.unique_code=res.data
				}
				
				
					
				});
			
			},
			
		}
	}
</script>

<style lang="scss">
page{
	background-color: #f4f4f4;
}
.bgView{
		padding: 30rpx;
		margin: 38rpx;
		background: #FFFFFF;
		border-radius: 11rpx 11rpx 11rpx 11rpx;
		opacity: 1;
	}
	.title2{
		margin-bottom: 20rpx;
		font-size: 31rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 550;
		color: #333333;
	}
	.title3{
		width: 150rpx;
		font-size: 27rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 550;
		color: #333333;
	}
	.inputView{
		width: 250rpx;
		input{
			font-size: 27rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 550;
			color: #333333;
		}
	}
	.line{
		height: 2rpx;
		background: #F6F9FB;
	}
	.button{
		margin: 135rpx 38rpx;
		height: 86rpx;
		background: #FF4D40;
		border-radius: 69rpx 69rpx 69rpx 69rpx;
		opacity: 1;
		font-size: 27rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}
</style>


